<template>
	<view class="mainBg h100 container">
		<uni-search-bar v-model="keyword" radius="50" placeholder="般若指月/搜索课程" clearButton="auto" @confirm="search" />
		<view class="content">
			<view class="left">
				<view class="col" v-for="(item,index) in list" :class="{active:active==index}"
					@click="handleChangeSort(item,index)">
					{{item.name}}
				</view>
			</view>
			<view class="right">
				<!-- 		<view class="title">
					架构
				</view> -->
				<view class="list" v-if="children.length > 0">
					<view class="col" v-for="(item,index) in children" :key="index">
						<view class="item" :class="{active:activeChild==index}" @click="handleSelect(item,index)">
							{{item.name}}
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				keyword: '',
				list: [],
				active: 0,
				activeChild: null,
				children: []
			}
		},
		onLoad() {
			this.getList()
		},
		methods: {
			getList() {
				this.$post("/course/category").then(res => {
					this.list = res.data
					this.children = this.list[0].children
				})
			},
			handleChangeSort(item, index) {
				this.active = index
				this.children = item.children
			},
			search() {

			},
			handleSelect(item, index) {
				this.activeChild = index
				uni.navigateTo({
					url: `/pages/sort/list?category_id=${item.id}&parent_id=${item.parentId}&name=${item.name}`
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background-color: #35CBAD;
	}

	.content {
		display: flex;
		align-items: flex-start;

		.left {
			width: 220rpx;
			background-color: #f2f2f2;
			font-size: 28rpx;

			.col {
				padding: 26rpx;
			}

			.active {
				background-color: #2FB298;
				color: #fff;
			}
		}

		.right {
			width: calc(100% - 220rpx);
			padding-left: 20rpx;

			.title {
				font-weight: bold;
				font-sise: 36rpx;
				margin-bottom: 10rpx;
			}

			.list {
				background-color: #4ADAC7;
				display: flex;
				flex-wrap: wrap;
				text-align: center;
				font-size: 28rpx;
				margin-bottom: 40rpx;
				padding: 10rpx 0;

				.col {
					padding: 6rpx 10rpx;
					width: 100%;

					.item {
						background-color: #fff;
						border-radius: 100px;
						padding: 10rpx 0;
					}

					.active {
						color: $assist-color2;
					}
				}
			}
		}
	}
</style>